<template>
  <section class="view-full view-bg">
    <img class="logo" src="../../../public/static/img/logo.png" alt="">
    <form action="/" class="form-box" @keyup="onEnter">
      <h1 class="title">学王教材版权管理系统</h1>
      <!-- 手机号  -->
      <div class="item">
        <img class="icon" src="./img/icon_zh.png" alt="">
        <input type="text" placeholder="请输入账号" tabindex="1" v-model="loginForm.mobile">
      </div>
      <!-- 密码  -->
      <div class="item">
        <img class="icon" src="./img/icon_mm.png" alt="">
        <input type="password" autocomplete="off" v-model="loginForm.password" tabindex="2" placeholder="请输入密码">
      </div>

      <!-- 登录按钮模块 -->
      <div class="submit-btn btn-active" :class="{'get-ok-Login': allowLogin}" @click="onlogin">登录</div>
    </form>
  </section>
</template>

<script>
// import { validUsername } from '@/utils/validate'
// import { login } from '@/api/common'

export default {
  name: 'Login',
  data() {
    return {
      loginForm: {
        mobile: '',
        password: '',
        useFor: 'wxmptools'
      },
      loading: false,
      showPwd: false,
      passwordType: 'password',
      redirect: undefined
    }
  },
  computed: {
    // 是否满足登录条件
    allowLogin: function () {
      return this.phone && this.password // && this.checked
    }
  },
  methods: {
    onEnter(ev) {
      if (ev.keyCode === 13) {
        this.onlogin()
      }
    },
    onlogin() {
      if (this.loading) return;
      this.loading = true

      this.apiGet('/api/manager/login', this.loginForm).then((res) => {
        if (res.ok) {
          this.setStateData({
            'user/token': res.data.token,
          })
          this.setMduleStateData('user', res.data.user)

          // let ro = await this.apiPost('/api/bg/shop/sysmenuh5/user')
          // if (!ro.ok) return this.$message.error('获取权限页面失败！')
          this.setMduleStateData('user', { roles: ['admin'] })

          this.$store.dispatch('user/login').then(() => {
            this.$router.push('/admin')
          })
        } else {
          this.$message.error(res.message)
        }
      }).catch(() => {
        this.$message.error('登录失败！')
      }).finally(() => {
        this.loading = false
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.view-bg {
  background: #ebf2ff url("../../../public/static/img/login-bg.png") no-repeat center/cover;
  font-family: Source Han Sans CN, Source Han Sans CN-Medium;
}

.logo {
  width: 204px;
  position: absolute;
  top: 38px;
  right: 66px;
}

/*.form-box {
  position: absolute;
  top: 40%;
  left: 50%;
  width: 700px;
  padding: 20px;
  transform: translate3d(-50%, -40%, 0);
  !*background: #E1E2DD;*!
  border-radius: 15px;
  .title {
    margin-bottom: 92px;
    font-size: 60px;
    font-weight: 500;
    text-align: center;
    color: #333333;
    line-height: 60px;
    letter-spacing: 3px;
  }
  .item {
    !*border-bottom: 1px solid #E1E2DD;*!
    width: 560px;
    height: 60px;
    margin: 0 auto 40px;
    background: #ffffff;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .icon {
      margin-left: 27px;
      width: 30px;
      height: 30px;
    }
    input {
      margin-left: 16px;
      flex: 1 1 auto;
      border: 0;
      background: transparent;
      color: #333333;
      font-size: 24px;
      line-height: 60px;
      outline: none;
    }
    input::placeholder {
      font-size: 24px;
      color: #7B8374;
    }
    img {
      width: 19.5px;
      height: 13.5px;
    }
  }

  .submit-btn {
    width: 560px;
    height: 60px;
    margin: 0 auto;
    background: linear-gradient(18deg, #3fb4ff 0%, #3fc7ff 100%);
    border-radius: 30px;
    font-size: 28px;
    line-height: 60px;
    text-align: center;
    color: #ffffff;
  }

  .get-ok-Login {
    background: linear-gradient(18deg,#3fb4ff 0%, #3fc7ff 100%);
  }
}*/
.form-box {
  position: absolute;
  top: 40%;
  left: 50%;
  width: 350px;
  padding: 10px;
  transform: translate3d(-50%, -40%, 0);
  /*background: #E1E2DD;*/
  border-radius: 7.5px;
  .title {
    margin-bottom: 46px;
    font-size: 30px;
    font-weight: 500;
    text-align: center;
    color: #333333;
    line-height: 30px;
    letter-spacing: 1.5px;
  }
  .item {
    /*border-bottom: 0.5px solid #E1E2DD;*/
    width: 280px;
    height: 30px;
    margin: 0 auto 20px;
    background: #ffffff;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .icon {
      margin-left: 13.5px;
      width: 15px;
      height: 15px;
    }
    input {
      margin: 0 8px;
      flex: 1 1 auto;
      border: 0;
      background: transparent;
      color: #333333;
      font-size: 12px;
      line-height: 30px;
      outline: none;
    }
    input::placeholder {
      font-size: 12px;
      color: #7B8374;
    }
    img {
      width: 9.75px;
      height: 6.75px;
    }
  }

  .submit-btn {
    width: 280px;
    height: 30px;
    margin: 0 auto;
    background: linear-gradient(18deg, #3fb4ff 0%, #3fc7ff 100%);
    border-radius: 15px;
    font-size: 14px;
    line-height: 30px;
    text-align: center;
    color: #ffffff;
  }

  .get-ok-Login {
    background: linear-gradient(18deg,#3fb4ff 0%, #3fc7ff 100%);
  }
}
</style>
